<template>
    <view>
        <form @submit="savepubinfo" report-submit>
            <view class="container">
                <view class="main">
                    <view class="header">创建简历(2/4)</view>
                    <view class="title">
                        <text @tap="addedu">+添加教育经历</text>
                    </view>

                    <view class="list">
                        <view class="item">
                            <view class="name">
                                入学时间
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <picker mode="date" :value="begindateschool" @change="BeginDateSchool">
                                    <view class="picker">
                                        {{ begindateschool ? begindateschool : '请选择' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                毕业时间
                            </view>
                            <view class="selectitem">
                                <picker mode="date" :value="enddateschool" @change="EndDateSchool">
                                    <view class="picker">
                                        {{ enddateschool ? enddateschool : '请选择' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                学 校
                                <text>*</text>
                            </view>
                            <view class="selectitem"><input value="" type="text" name="school" placeholder="请输入学校" :value="eduinfo.school" cursor-spacing="140" /></view>
                        </view>

                        <view class="item">
                            <view class="name">
                                学 历
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <picker :value="Index" :range="education" range-key="" @change="bindEducationChange">
                                    <view class="picker">
                                        {{ educationname ? educationname : '请选择学历' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                专业
                                <text>*</text>
                            </view>
                            <view class="selectitem"><input type="text" :value="eduinfo.vocation" name="vocation" placeholder="请输入专业" cursor-spacing="140" /></view>
                        </view>
                    </view>

                    <view class="title"></view>
                    <view class="list poRel" v-if="ln > 0">
						<view class="poAbs" @click.stop="ln = 0" style="right: 30rpx;top: 20rpx;">删除</view>
                        <view class="item">
                            <view class="name">
                                入学时间
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <picker mode="date" :value="begindateschool2" @change="BeginDateSchool2">
                                    <view class="picker">
                                        {{ begindateschool2 ? begindateschool2 : '请选择' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                毕业时间
                               <!-- <text>*</text> -->
                            </view>
                            <view class="selectitem">
                                <picker mode="date" :value="enddateschool2" @change="EndDateSchool2">
                                    <view class="picker">
                                        {{ enddateschool2 ? enddateschool2 : '请选择' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                学 校
                                <text>*</text>
                            </view>
                            <view class="selectitem"><input :value="eduinfo.school2" type="text" name="school2" placeholder="请输入学校" cursor-spacing="140" /></view>
                        </view>

                        <view class="item">
                            <view class="name">
                                学 历
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <picker :value="Index" :range="education" range-key="" @change="bindEducationChange2">
                                    <view class="picker">
                                        {{ educationname2 ? educationname2 : '请选择学历' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                专业
                                <text>*</text>
                            </view>
                            <view class="selectitem"><input type="text" :value="eduinfo.vocation2" name="vocation2" placeholder="请输入专业" cursor-spacing="140" /></view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="weixinmao-float">
                <view class="weixinmao-foot">
                    <button class="foot" style="bottom: 10px" formType="submit">下一步</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import { Note } from '../findworker/note-model.js';
var note = new Note();
export default {
    data() {
        return {
            ln: 0,
            education: ['初中', '高中', '中技', '中专', '大专', '本科', '硕士', '博士', '博后'],
            educationindex: -1,
            educationname: '',
            educationindex2: -1,
            educationname2: '',

            eduinfo: {
                school: '',
                vocation: '',
                school2: '',
                vocation2: ''
            },

            begindateschool: '',
            enddateschool: '',
            begindateschool2: '',
            enddateschool2: '',
            Index: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        uni.setNavigationBarTitle({
            title: '我的教育经历'
        });
        var that = this;
        that.initpage();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        initpage: function () {
            var that = this;
            var params = {};
            note.getPubEduInit((data) => {
                var eduinfo = data.eduinfo;
                if (eduinfo) {
                    that.setData({
                        eduinfo: eduinfo,
                        ln: data.ln,
                        begindateschool: eduinfo.begindateschool,
                        enddateschool: eduinfo.enddateschool,
                        educationname: eduinfo.educationname
                    });
                    if (data.ln > 0) {
                        that.setData({
                            begindateschool2: eduinfo.begindateschool2,
                            enddateschool2: eduinfo.enddateschool2,
                            educationname2: eduinfo.educationname2
                        });
                    }
                }
            }, params);
        },

        addedu: function () {
            if (this.ln == 1) {
                uni.showToast({
                    title: '最多添加2条信息',
                    icon: 'none'
                });
            } else {
                this.setData({
                    ln: this.ln + 1
                });
            }
        },

        BeginDateSchool: function (e) {
            var that = this;
            that.begindateschool = e.detail.value;
            this.setData({
                begindateschool: that.begindateschool
            });
        },

        EndDateSchool: function (e) {
            var that = this;
            that.enddateschool = e.detail.value;
            this.setData({
                enddateschool: that.enddateschool
            });
        },

        BeginDateSchool2: function (e) {
            var that = this;
            that.begindateschool2 = e.detail.value;
            this.setData({
                begindateschool2: that.begindateschool2
            });
        },

        EndDateSchool2: function (e) {
            var that = this;
            that.enddateschool2 = e.detail.value;
            this.setData({
                enddateschool2: that.enddateschool2
            });
        },

        bindEducationChange: function (e) {
            var that = this;
            var education = that.education;
            if (education) {
                that.educationindex = e.detail.value;
                that.educationname = education[e.detail.value];
            }
            that.setData({
                education: education,
                educationname: that.educationname,
                educationindex: e.detail.value
            });
        },

        bindEducationChange2: function (e) {
            var that = this;
            var education = that.education;
            if (education) {
                that.educationindex2 = e.detail.value;
                that.educationname2 = education[e.detail.value];
            }
            this.setData({
                education: education,
                educationname2: that.educationname2,
                educationindex2: e.detail.value
            });
        },

        savepubinfo: function (e) {
            var that = this;
            var ln = that.ln;
            var title = that.title;
            var begindateschool = that.begindateschool;
            var enddateschool = that.enddateschool;
            var school = e.detail.value.school;
            var educationname = that.educationname;
            var vocation = e.detail.value.vocation;
            if (begindateschool == '') {
                uni.showModal({
                    title: '提示',
                    content: '请选择入学时间',
                    showCancel: false
                });
                return;
            }
            // if (enddateschool == '') {
            //     uni.showModal({
            //         title: '提示',
            //         content: '请选择毕业时间',
            //         showCancel: false
            //     });
            //     return;
            // }
            if (school == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入学校',
                    showCancel: false
                });
                return;
            }
            if (educationname == '') {
                uni.showModal({
                    title: '提示',
                    content: '请选择学历',
                    showCancel: false
                });
                return;
            }
            if (vocation == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入专业',
                    showCancel: false
                });
                return;
            }
            if (ln == 1) {
                var begindateschool2 = that.begindateschool2;
                var enddateschool2 = that.enddateschool2;
                var school2 = e.detail.value.school2;
                var educationname2 = that.educationname2;
                var vocation2 = e.detail.value.vocation2;
                if (begindateschool2 == '') {
                    uni.showModal({
                        title: '提示',
                        content: '请选择入学时间',
                        showCancel: false
                    });
                    return;
                }
                // if (enddateschool2 == '') {
                //     uni.showModal({
                //         title: '提示',
                //         content: '请选择毕业时间',
                //         showCancel: false
                //     });
                //     return;
                // }
                if (school2 == '') {
                    uni.showModal({
                        title: '提示',
                        content: '请输入学校',
                        showCancel: false
                    });
                    return;
                }
                if (educationname2 == '') {
                    uni.showModal({
                        title: '提示',
                        content: '请选择学历',
                        showCancel: false
                    });
                    return;
                }
                if (vocation2 == '') {
                    uni.showModal({
                        title: '提示',
                        content: '请输入专业',
                        showCancel: false
                    });
                    return;
                }
            }
            if (ln == 0) {
                var params = {
                    begindateschool: begindateschool,
                    enddateschool: enddateschool,
                    school: school,
                    educationname: educationname,
                    vocation: vocation,
                    ln: that.ln
                };
            } else {
                var params = {
                    begindateschool: begindateschool,
                    enddateschool: enddateschool,
                    school: school,
                    educationname: educationname,
                    vocation: vocation,
                    begindateschool2: begindateschool2,
                    enddateschool2: enddateschool2,
                    school2: school2,
                    educationname2: educationname2,
                    vocation2: vocation2,
                    ln: that.ln
                };
            }
            console.log(params);
            note.Saveedu((data) => {
                uni.navigateTo({
                    url: '/pages/nextexpress/index'
                });
            }, params);
        }
    }
};
</script>
<style>
.container {
    background-color: #f5f5f5;
    min-height: 100%;
    margin-bottom: 20%;
}
.container .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container .main .header {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #000;
    text-align: center;
    background: #fff;
}

.container .main .title {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #3274e5;
    text-align: right;
}

.container .main .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}

::-webkit-input-placeholder {
    color: #000;
    font-size: 18px;
}

.container .main .list .item {
    width: 700rpx;
    border-bottom: 1rpx solid #f5f5f5;
    align-self: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    /*
flex-direction: row;
justify-content:space-between;
*/
}
.container .main .list .item .name {
    font-size: 14px;
    color: #a2a2a2;
}
.container .main .list .item .name text {
    color: red;
}
.container .main .list .item .selectitem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #808080;
    font-size: 14px;
    height: 100rpx;
    line-height: 100rpx;
    background: #fff;
}

.container .main .list .item .selectitem input {
    height: 100rpx;
    width: 740rpx;
    color: #000;
    font-size: 18px;
}

.container .main .list .item .selectitem > image {
    width: 30rpx;
    height: 30rpx;
    align-self: center;
}
.container .main .checklist {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    flex-wrap: wrap;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
}
.radio {
    font-size: 18px;
}
.picker {
    font-size: 18px;
}
.container .main .checklist checkbox-group {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.container .main .checklist .checkitem {
    font-size: 0.7rem;
    width: 240rpx;
    margin-top: 10rpx;
}

.container .doagree {
    font-size: 0.7rem;
    margin-left: 50rpx;
    margin-top: 40rpx;
    margin-bottom: 280rpx;
    padding-bottom: 50rpx;
}

.container .main .imglist {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #fff;
}

.container .main .imglist .imgitem {
    width: 200rpx;
    border: 1rpx dotted #f5f5f5;
    position: relative;
}
.container .main .imglist .imgitem image {
    width: 200rpx;
    height: 200rpx;
}

.sum {
    position: absolute;
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background: #3274e5;
    top: -10rpx;
    left: 150rpx;
    color: #fff;
    z-index: 1000;
    font-size: 0.7rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.sum text {
    font-size: 0.7rem;
    align-self: center;
}

.weixinmao-msg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content {
    width: 720rpx;
    height: 450rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map {
    height: 850rpx;
}
.mapbtn {
    background: #3274e5;
    color: #fff;
    font-size: 1rem;
    width: 400rpx;
}
.weixinmao-content .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;

    z-index: 999;

    width: 100%;
}

.weixinmao-foot view {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    width: 50%;
    border-radius: 0rpx;
    padding-left: 30rpx;
    background: #e64340;
}
.weixinmao-foot button {
    background: #07b56d;
    width: 100%;
    color: #fff;
    border-radius: 0rpx;
    font-size: 1rem;
}

.ismaster {
    color: red;
    font-weight: bold;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 30rpx;
    align-self: center;
}

.selectitem textarea {
    width: 100%;
}

.masterbtn {
    margin-top: 100rpx;
    width: 300rpx;
    background: #3274e5;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 5rpx;
    text-align: center;
    font-size: 0.7rem;
}

.weixinmao-msg_show {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content_show {
    width: 550rpx;
    height: 600rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weixinmao-content_show .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content_show .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content_show .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content_show .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content_show .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content_show .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.heaerpic {
    width: 380rpx;
    height: 250rpx;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.heaerpic image {
    width: 160rpx;
    height: 160rpx;
    border: 7rpx solid #fff;
    border-radius: 160rpx;
}
.heaerpic view {
    height: 80rpx;
    line-height: 80rpx;
    width: 380rpx;
    text-align: center;
    font-size: 0.8rem;
}

.ql-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.5;
    overflow: auto;
    padding: 10px 10px 20px 10px;
    border: 1px solid #ececec;
}

.ql-active {
    color: #22c704;
}

.iconfont {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
}

.toolbar {
    box-sizing: border-box;
    padding: 0 10px;
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    right: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-left: none;
    border-right: none;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
</style>
